import React, { useEffect } from 'react'
import { NavBar, Form, Button, Radio, Space, Modal, } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'

export default function Login() {
  const navigate = useNavigate()
  const back = () => {
    navigate(-1)
  }
  const [flag, setflag] = React.useState(true)
  let [time, settime] = React.useState(60)
  // const getCode = async () => {
  //   setflag(false)
  //   let timer = setInterval(async () => {
  //     settime(--time)
  //     if (time === 55) {
  //       let res = await axios.get(`http://localhost:3000/code`, { params: { iphone: value } })
  //     }
  //     if (time == 0) {
  //       clearInterval(timer)
  //       settime(60)
  //       setflag(true)
  //     }
  //   }, 1000)
  // }
  const [value, setValue] = React.useState('')
  const [value_1, setValue_1] = React.useState('')
  const [value_2, setValue_2] = React.useState('')
  const Login = async () => {
    let obj = {
      iphone: value,
      pwd: value_1,
      spwd:value_2
    }
    let res = await axios.post('http://localhost:3000/login_1', obj)
    console.log(res);
    localStorage.setItem("user_id",res.data.lis._id)
    if (res.data.code === 200 && value_1 === value_2) {
      Modal.alert({
        content: '登陆成功',
        closeOnMaskClick: true,
      })
      setTimeout(() => {
        navigate('/iphone')
      }, 2000)
    } else {
      Modal.alert({
        content: '登陆失败（可能两次密码不一致）',
        closeOnMaskClick: true,
      })
    }


  }
  return (
    <div>
      <NavBar onBack={back}></NavBar>
      <div>
        <h2 style={{ textAlign: 'center' }}>登录注册</h2>
        <p style={{ textAlign: 'center', color: 'rgb(153,153,153)', marginTop: '10px' }}>未注册的手机号登录成功后将自动注册</p>
      </div>
      <div style={{ marginTop: '100px' }}>
        <Form layout='horizontal'>
          <Form.Item label=''>
            <input placeholder='请输入手机号' value={value} onChange={(e) => setValue(e.target.value)} style={{ border: 'none', width: '250px', height: '40px', fontSize: '18px' }} />
          </Form.Item>
          <Form.Item label=''>
            <input type='password' placeholder='请输入密码' value={value_1} onChange={(e) => setValue_1(e.target.value)} style={{ border: 'none', width: '250px', height: '40px', fontSize: '18px' }} />
          </Form.Item>
          <Form.Item label=''>
            <input type='password' placeholder='再次输入密码' value={value_2} onChange={(e) => setValue_2(e.target.value)} style={{ border: 'none', width: '250px', height: '40px', fontSize: '18px' }} />
          </Form.Item>
        </Form>
        <Button color='primary' fill='outline' onClick={() => { Login() }} style={{ width: '250px', height: '50px', borderRadius: '30px', background: 'rgb(36,200,116)', color: 'white', marginTop: '30px', marginLeft: '65px' }}>
          注册并登录
        </Button>
        <Space direction='vertical' style={{ 'marginTop': '30px', marginLeft: '35px' }}>
          <Radio style={{ '--icon-size': '15px' }}><span style={{ fontSize: '15px' }}>我已阅读并同意签署 用户协议 和 隐私政策</span></Radio>
        </Space>
        <p style={{ textAlign: 'center', marginTop: '160px', color: 'rgb(153,153,153)', fontSize: '15px' }}>第三方登录</p>
        {/* <img src='https://tse4-mm.cn.bing.net/th/id/OIP-C.tK40lkc98KFY1bSSfTt0wQHaF_?w=268&h=216&c=7&r=0&o=5&dpr=1.3&pid=1.7' alt='' width='45px' height='40px' style={{ marginLeft: '130px', marginTop: '30px' }} onClick={()=>{navigate('/wechat')}}/> */}
        <img src='https://ts1.cn.mm.bing.net/th/id/R-C.5cf46f0c569a7b743c83ac70274cb824?rik=1vYfPThHrKr28g&riu=http%3a%2f%2fwww.taigusys.com%2fupload%2f201905%2f1557223957.jpg&ehk=1Ih%2f%2fmw4ASkN2zlC45cRxioolMloMg%2fhBh90rZURUEs%3d&risl=&pid=ImgRaw&r=0' alt='' width='45px' height='45px' style={{ marginLeft: '170px', borderRadius: '10px',marginTop:"30px" }} onClick={() => { navigate('/face') }} />
      </div>
    </div>
  )
}
